<html>
  <head>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <link rel="stylesheet" type="text/css"
                           href="qrc:///share/static/css/chat.css"/>
  </head>
  <body>
    <script type="text/javascript">
      new QWebChannel(qt.webChannelTransport, function (channel) {
        window.chatroom = channel.objects.chatroom;
        window.galacteek = channel.objects.galacteek;

        window.chatroom.chatMsgAttachments.connect(function(msgUid, attach) {
            attach.forEach(function(att) {
                message = document.getElementById(msgUid)

                if (typeof(message) == 'undefined') {
                    return
                }

                messages = document.getElementById('messages')
                l1 = document.createElement("div")
                l1.setAttribute('class', 'attachment')
                markup = `
                  <div class="msg-text">
                    <img src="qrc:/share/icons/clipboard.png"
                     width="16px" height="auto"
                     onclick="event.preventDefault();
                     window.galacteek.copyToClipboard('${ att.objPath }');"></img>


                    <p>Attachment (${ att.mimeType })</p>
                    <p><a href="${ att.url  }"
                     onclick="event.preventDefault(); window.galacteek.openResource('${ att.objPath }');">${ att.objPath }</a>

                     </p>
                  </div>
                `

                if (att.mimeType.startsWith('image')) {
                  markup += `
                    <img src="${ att.url }"
                     width="250px" height="auto"
                     onclick="event.preventDefault(); window.galacteek.openResource('${ att.objPath }');"></img>
                  `
                }

                l1.innerHTML = markup
                message.appendChild(l1)
                bScroll()
            })
        })

        window.chatroom.chatJoinLeftReceived.connect(function(msg) {
            messages = document.getElementById('messages')
            l0 = document.createElement("div")
            l0.setAttribute('class', 'chat-status-message center-msg')

            if (msg['status'] == 'joined') {
                sMsg = `<b>${ msg.spaceHandle }</b> joined the room`
            } else if (msg['status'] == 'left') {
                sMsg = `<b>${ msg.spaceHandle }</b> left the room`
            }

            markup = `
                <div class="msg-img"
                style="background-image: url('dweb:${ msg.avatarPath }')">
                </div>

                  <div class="msg-text">
                      ${ sMsg }
                  </div>
            `

            l0.innerHTML = markup
            messages.appendChild(l0)
            bScroll()
        })


        window.chatroom.chatMsgReceived.connect(function(msg) {
            messages = document.getElementById('messages')
            l0 = document.createElement("div")
            l1 = document.createElement("div")

            if (msg['local']) {
                l1.setAttribute('class', 'msg right-msg')
            } else {
                l1.setAttribute('class', 'msg left-msg')
            }
            l0.setAttribute('id', msg.uid)

            markup = `
                <div class="msg-img"
                style="background-image: url('dweb:${ msg.avatarPath }')">
                </div>

                <div class="msg-bubble">
                  <div class="msg-info">
                    <div class="msg-info-name">${ msg.spaceHandle }</div>
                    <div class="msg-info-time">${ msg.time }</div>
                  </div>

                  <div class="msg-text">
                      ${ msg.message }
                  </div>
               </div>
            `

            l1.innerHTML = markup
            l0.appendChild(l1)
            messages.appendChild(l0)
            bScroll()
        })
     })

      function sendMessage() {
          imessage = document.getElementById('input-message')

          if (imessage.value.length > 0) {
              window.chatroom.sendMessage(imessage.value)
              imessage.value = ""
          }
      }

      function clearMessages() {
          messages = document.getElementById('messages')

          let ok = confirm('Clear chat messages ?')
          if (ok) {
              messages.innerHTML = ""
          }
      }

      function bScroll() {
          messages = document.getElementById('messages')
          messages.scrollTop = messages.scrollHeight;
      }

    </script>

    <section class="msger">
      <main class="msger-chat" id="messages">
      </main>

      <div style="background-color: #CCDAD5">
          <p style="font-size: 1em; padding: 10px; margin-left: 10px;
            text-align: center">
              Paste a CID/path or use the <b>@CID</b> syntax (or <b>@PATH</b>) to
              <a href="manual:/markdown.html#ipfs-links">
                  send IPFS links in the chat
                </a>
          </p>

          <form class="msger-inputarea">
            <p title="Markdown message">Message</p>
            <input type="text" class="msger-input" id="input-message"/>
            <button type="submit" class="msger-send-btn"
                onclick="event.preventDefault(); sendMessage();">Send</button>
            <button type="submit" class="msger-clear-btn"
                onclick="event.preventDefault(); clearMessages();">Clear</button>
          </form>
      </div>
    </section>
  </body>
</html>
